$.extend({
    /**
     * 设置每个旋转部件的border
     * @param {number} howmany 
     * @return {Array} border样式数组
     */
    setEveryChildBorder(howmany) {
        if (howmany == 1) {
            return [
                [
                    { border: '1px solid' },
                    { border: '1px solid' },
                    { border: '1px solid' },
                    { border: '1px solid' },
                    { border: '1px solid' },
                    { border: '1px solid' }
                ]
            ];
        }
        const borderArray = [

        ];
        const beforeBorder = [ // 第一个立体的border样式
            {
                'border-top': '1px solid',
                'border-bottom': '1px solid',
            },
            {
                'border-top': '1px solid',
                'border-bottom': '1px solid',
            },
            {}, {},
            {
                'border': '1px solid',
            },
            {}
        ]
        const basicBorder = [ //中间立方体的border样式
            {
                'border-top': '1px solid',
                'border-bottom': '1px solid',
            },
            {
                'border-top': '1px solid',
                'border-bottom': '1px solid',
            }, {}, {}, {}, {}
        ];
        const afterBorder = [ // 最后一个立体的border样式
            {
                'border-top': '1px solid',
                'border-bottom': '1px solid',
            },
            {
                'border-top': '1px solid',
                'border-bottom': '1px solid',
            },
            {}, {}, {},
            {
                'border': '1px solid',
            }
        ]
        borderArray.push(beforeBorder)
        for (let i = 0; i < howmany - 2; i++) {
            borderArray.push(basicBorder)
        }
        borderArray.push(afterBorder);
        return borderArray;
    },
    /**
     * 
     * @param {*} x 
     * @param {*} y 
     * @param {*} z 
     * @param {*} extendStyles 每个部件的拓展样式
     * @returns 返回6个部件的集成样式
     */
    createChild(x, y, z, extendStyles) {
        let everyChildStyles = [
            { transform: `translate(-50%,-50%) translateZ(${y / 2}px)` },
            { transform: `translate(-50%,-50%) rotateY(180deg) translateZ(${y / 2}px)` },
            { transform: `translate(-50%,-50%) rotateX(90deg) translateZ(${z / 2}px)` },
            { transform: `translate(-50%,-50%) rotateX(270deg) translateZ(${z / 2}px)` },
            { transform: `translate(-50%,-50%) rotateY(270deg) translateZ(${x / 2}px)` },
            { transform: `translate(-50%,-50%) rotateY(90deg) translateZ(${x / 2}px)` },

        ]

        // 映射每个对应的正确样式
        everyChildStyles = everyChildStyles.map((style, index) => {
            let width, height;
            if (index < 2) { //前后
                width = x;
                height = z;
            }
            else if (index >= 2 && index < 4) { //上下
                width = x;
                height = y;
            }
            else if (index >= 4) {
                width = y;
                height = z;
            }
            return {
                width: width + 'px',
                height: height + 'px',
                position: 'absolute',
                left: '50%',
                top: `50%`,
                // border: '1px solid',
                ...style,
                ...extendStyles[index]
            }
        })
        return everyChildStyles;
    },
    /**
     * 设置所有面的样式
     * @param {object} style 
     */
    setAllChildStyle(style) {
        const allChildStyles = new Array(6).fill(style);
        return allChildStyles;
    },

    /**
     * 创建一个头部样式
     * @param {*} headurl 头部的url图片
     * @param {*} color 
     */
    createChildHeadStyle(headurl, color) {
        const childStyle = new Array(5).fill({
            backgroundColor: color,
            border: 'none'
        });
        childStyle.unshift({
            backgroundImage: `url(${headurl})`,
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
            border: 'none'
        });
        return childStyle;
    },
    /**
     * 创建随机数字
     * @param {*} min 
     * @param {*} max 
     * @param {*} numsContainer 
     * @returns 
     */
    getRandom(min, max,numsContainer) {
        return Math.floor(Math.random() * (max + 1 - min) + min);
    },
    getRandomColor(){
        return `rgb(${$.getRandom(0,255)},${$.getRandom(0,255)},${$.getRandom(0,255)})`
    }
})
$.fn.extend({
    /**
     * 在旋转空间里面，创建一个3d正方形盒子，当howmany大于1的时候，会沿着x轴创建；
     * 支持创建长方体
     * @param {number} x 长度
     * @param {number} y 宽度
     * @param {number} z 高度
     * @param {number} howmany 多少个
     * @param {Object} mainExtendStyle 旋转体的拓展样式
     * @param {Array}  childStyles 旋转部件的拓展样式 [前，后，上，下，左，右 ]
     */
    create3DBox(x, y, z, howmany, mainExtendStyle, childStyles = [{}, {}, {}, {}, {}, {}]) {

        // if (x != y || x != z || y != z) {
        //     console.error('目前不支持创建长方体');
        //     return;
        // }

        //设置旋转空间的3d基础样式，并清空里的html
        $(this).css({
            'transform-style': `preserve-3d`,
            width: `${x * howmany}px`,
            height: `${y}px`,
        })
        //获取全部立法体的正确border样式
        const allBordersArr = $.setEveryChildBorder(howmany);

        for (let i = 0; i < howmany; i++) {
            //创建旋转体
            const main = document.createElement('div');

            //设置旋转体的样式
            const mainFinallStyle = {
                position: 'absolute',
                'transform-style': 'preserve-3d',
                width: x + 'px',
                height: y + 'px',
                ...mainExtendStyle,
                transform: mainExtendStyle.transform ? `translateX(${i * x}px) ` + mainExtendStyle.transform : `translateX(${i * x}px)`,
            }
            $(main).css(mainFinallStyle)

            //创建旋转部件的样式
            const everyChildStyles = $.createChild(x, y, z, allBordersArr[i])

            for (let j = 0; j < 6; j++) {
                const child = document.createElement('div');
                $(child).css({
                    position: 'absolute',
                    ...everyChildStyles[j],
                    ...childStyles[j]
                })
                //插入部件
                $(main).append(child);
            }

            $(this).append(main)
        }

        return this;
    },
    /**
     * 自动旋转
     */
    autoRotateX(speed,transformOld,isReverse = false) {
        const self = this;
        if(isReverse) speed = -speed;
        let angle = speed;
        requestAnimationFrame(animate);
        function animate() {
            $(self).css({
                transform: `${transformOld} rotate3d(0,1,0,${angle}deg)`,
            })
            angle += speed;
            requestAnimationFrame(animate);
        }
    }
})
